<template>
    <div class="suggestion" style="margin: 20px;">
        <h2 style="color: #F56C6C;margin-left: 460px;">建设建议</h2>
        <el-row>
            <el-col :span="24">
                <el-card class="box-card"
                    style="width: 1024px;display: flex;justify-content: center;align-items: center;padding: 10px 0;">
                    <el-form :model="suggestionForm" :rules="rules" ref="suggestionForm" label-width="100px"
                        class="demo-suggestionForm">
                        <el-form-item label="标题" prop="title">
                            <el-input v-model="suggestionForm.title" style="width: 246px;"></el-input>
                        </el-form-item>
                        <el-form-item label="板块" prop="code">
                            <el-select v-model="suggestionForm.code" placeholder="请选择板块">
                                <el-option label="生活分享" value="1"></el-option>
                                <el-option label="学习交流" value="2"></el-option>
                                <el-option label="其他" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="具体内容" prop="desc">
                            <el-input type="textarea" style="width: 246px;" v-model="suggestionForm.desc"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('suggestionForm')">提交</el-button>
                            <el-button @click="resetForm('suggestionForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>

                <div class="jianls" style="margin-top: 20px;margin-left: 20px; display: flex;gap:20px;flex-wrap: wrap;">
                    <el-card v-for="item in suggestionlist" :key="item.id" style="width: 320px;">
                        <el-tooltip :content="item.content" placement="bottom" effect="light">
                            <h4>{{ item.title }}</h4>
                        </el-tooltip>
                        <p style="display: flex;gap:16px;"><el-link :underline="false">{{ item.userName }}</el-link>
                            提交于<el-link :underline="false">{{ item.createTime }}</el-link> </p>
                        <el-tag type="success">{{ item.name }}</el-tag>
                        <el-badge is-dot class="item" style="margin-left: 36px;cursor: pointer;" v-show="item.status == 1"
                            @click.native="open(item)">查看回复</el-badge>
                            <el-link type="info" disabled style="margin-left: 36px;" v-show="item.status == 0">未回复</el-link>
                    </el-card>
                </div>
            </el-col>
        </el-row>

    </div>

</template>


<script>
// 导入api
import API from "@/api/request";

export default {
    inject: ['reload'],
    data() {
        return {
            suggestionForm: {
                title: '',
                code: '',
                desc: '',
                user: {}
            },
            suggestionlist: [],
            rules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                    { min: 1, max: 120, message: '长度在 1 到 120 个字符', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '请选择板块', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写具体内容', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        suggestion() {
            API.post("/api/suggestion/suggestion", {
                "title": this.suggestionForm.title,
                "code": this.suggestionForm.code,
                "userName": this.user.username,
                "userId": this.user.studentId,
                "content": this.suggestionForm.desc
            }).then(res => {
                if (res.data.code === 200) {
                    this.$message({
                        message: '提交建议成功！',
                        type: 'success'
                    });
                }
            }).catch(error => {
                console.log(error);
                this.$message({
                    message: '提交建议失败！',
                    type: 'error'
                });
            })
        },
        getsuggestionlist() {
            API.get('/api/suggestion/list', {
                params: {
                    "stuId": this.user.studentId
                }
            }).then(res => {
                if (res.data.code == 200) {
                    this.suggestionlist = res.data.data;
                }
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.suggestion();
                    // 延迟刷新页面，确保消息提示能够显示
                    setTimeout(() => {
                        this.reload();
                    }, 1000); // 1秒后刷新页面
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        open(item) {
            console.log(item)
            console.log("测试")
            this.$alert(item.reply, '', {
                confirmButtonText: '确定',
                callback: action => {
                    this.$message({
                        type: 'info',
                        message: `已关闭`
                    });
                }
            });
        }


    },
    created() {
        this.user = sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : {}
        console.log(this.user)
        this.getsuggestionlist();
    },
};
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>